<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDoList</title>
    <script src="./vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .todolist li {
            display: flex;
            align-items: center;
            list-style: none;
        }

        .todolist li input:nth-child(2) {
            border: none;
            width: 300px;
        }

        .msg {
            text-decoration: line-through;
        }

        .pages {
            display: flex;
            list-style: none;
        }

        .pages li {
            width: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        添加：<input type="text" @keydown.enter="handleEnter" placeholder="添加事件">
        查找：<input type="text" class="search" @input="handleSearch">
        <ul class="todolist">
            <li v-for="item in getList">
                <input type="checkbox" name="" id="" v-model="item.isDid">
                <input :class="{msg:item.isDid}" @blur="edit(item.id,$event)" :value="item.value">
                <button @click="handleDel(item.id)">删除</button>
            </li>
        </ul>
        <ul class="pages">
            <li v-for="n in getPage" @click="changePageNum(n)">{{n}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                todolist: [],
                pageSize: 5,
                pageNum: 1,
                searchList: []
            },
            computed: {
                getList() {
                    if (this.searchList.length == 0) {
                        let startIndex = (this.pageNum - 1) * this.pageSize;
                        let endIndx = startIndex + this.pageSize;
                        return this.todolist.slice(startIndex, endIndx)
                    } else {
                        return this.searchList;
                    }

                },
                getPage() {
                    return Math.ceil(this.todolist.length / this.pageSize)
                }
            },
            methods: {
                handleEnter(event) {
                    if (event.target.value !== "") {
                        this.todolist.push({ value: event.target.value, id: Date.now(), isDid: false });
                        event.target.value = "";
                    } else {
                        alert("输入值不能为空");
                    }
                },
                handleDel(id) {
                    this.todolist.forEach((val, index) => {
                        if (val.id == id) {
                            this.todolist.splice(index, 1)
                        }
                    })
                },
                changePageNum(n) {
                    this.pageNum = n;
                },
                handleSearch(event) {
                    this.searchList = [];
                    if (event.target.value != "") {
                        // var reg = new RegExp(event.target.value);
                        this.todolist.forEach((val, index) => {
                            if (val.value.indexOf(event.target.value) != -1 ) {
                                this.searchList.push(val);
                            }
                        })
                    }
                },
                edit(id, event) {
                    this.todolist.forEach((val, index) => {
                        if (val.id == id) {
                            this.todolist[index].value = event.target.value;
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>